<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="./bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
 #box1{
     background: rgba(41, 193, 219, 0.589);
     width: 100%;
     height: 750px;
    }
 #box2{
     background: rgb(0, 0, 0,0.1);
     width: 300px;
     height: 20px;
     text-align: center;
     margin: auto;
 }

 #box3{
    text-align: center;
    margin-top: 40px;
 }
 button{
     width: 40px;
     height: 40px;
 }
 #btn1{
  width: 160px;
 }
 input{
     display: none;
     background: none;
     border: none;

 }
</style>
<body>
    <div id="box1">
        <div id="box2">第六号放映厅</div>
            <div id="box3">
                <table>
                <tr>
                <button onclick="gezi(0)" id="bt1" value="35"></button>
                <button onclick="gezi(1)" id="bt2" value="35"></button>
                <button onclick="gezi(2)" id="bt3" value="35"></button>
            </tr><br>
            <tr>
                <button onclick="gezi(3)" id="bt4" value="35"></button>
                <button onclick="gezi(4)" id="bt5" value="35"></button>
                <button onclick="gezi(5)" id="bt6" value="35"></button>
            </tr><br>
            <tr>
                <button onclick="gezi(6)" id="bt7" value="35"></button>
                <button onclick="gezi(7)" id="bt8" value="35"></button>
                <button onclick="gezi(8)" id="bt9" value="35"></button>
            </tr>
        </table>
        </div>
            <div>
                <input type="text" onclick="xianshi(0)" value="一排 一座">
                <input type="text" onclick="xianshi(1)" value="一排 二座">
                <input type="text" onclick="xianshi(2)" value="一排 三坐">
                <input type="text" onclick="xianshi(3)" value="二排 一座">
                <input type="text" onclick="xianshi(4)" value="二排 二坐">
                <input type="text" onclick="xianshi(5)" value="二排 三座">
                <input type="text" onclick="xianshi(6)" value="三排 一座">
                <input type="text" onclick="xianshi(7)" value="三排 二座">
                <input type="text" onclick="xianshi(8)" value="三排 三座">
                <!-- <p onclick="xianshi(0)">一排 一座</p>
                <p onclick="xianshi(1)">一排 二座</p>
                <p onclick="xianshi(2)">一排 三坐</p><br>
                <p onclick="xianshi(3)">二排 一座</p>
                <p onclick="xianshi(4)">二排 二坐</p>
                <p onclick="xianshi(5)">二排 三座</p><br>
                <p onclick="xianshi(6)">三排 一座</p>
                <p onclick="xianshi(7)">三排 二座</p>
                <p onclick="xianshi(8)">三排 三座</p> -->
            </div>
        
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="btn1">
           购票
        </button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <div id="box1">
                            <h4>第几行：</h4>
                            <input type="number">
                            <h4>第几列：</h4>
                            <input type="number">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="btn2">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
<script>
   $(function(){
    gezi(suibian)
    xianshi(suibian)
//        $('#btn2').click(switchcss)
//        $('buttom:eq()').click(bianse)
//    })
//    function bianse(){
//       console.log(111);
//    }
//    function switchcss(){
//        pinjie = ''
//         var ipt1 = $('input:eq(0)').val()
//             ipt2 = $('input:eq(1)').val()
//         pinjie+=`
//                 <button></button> 
//                 `
//         $('table').append(pinjie)
   })

function gezi(suibian){
    $('button').eq(suibian).css('background','red')
    $('input').eq(suibian).css('display','block')
    var arrbox = ''
  var btt1 = $('button').val()
    arrbox +=`
            
             `
             $('input').html(arrbox)
// console.log(btt1);
}
   
function xianshi(suibian){
    $('input').eq(suibian).css('display','none')
    $('button').eq(suibian).css('background','')

   }
</script>
</html>
